<template>
  <div class="app-container">
    <!-- 测试内容 -->
    <div style="background: red; color: white; padding: 10px; margin-bottom: 10px;">
      页面测试 - 如果你能看到这个红色条，说明页面能正常渲染
    </div>
    
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="订单号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入用户id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="开始时间" prop="startTime">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.startTime"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择开始时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="结束时间" prop="endTime">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.endTime"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择结束时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="起始位置" prop="startLocation">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.startLocation"-->
      <!--          placeholder="请输入起始位置"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="结束位置" prop="endLocation">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.endLocation"-->
      <!--          placeholder="请输入结束位置"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="总里程" prop="mileage">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.mileage"-->
      <!--          placeholder="请输入总里程"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="订单报价" prop="orderPrice">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.orderPrice"-->
      <!--          placeholder="请输入订单报价"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="预计发车时间段" prop="predictStartTime">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.predictStartTime"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择预计发车时间段">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="预计发车时间段" prop="predictEndTime">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.predictEndTime"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择预计发车时间段">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-plus"-->
      <!--          size="mini"-->
      <!--          @click="handleAdd"-->
      <!--          v-hasPermi="['api:order:add']"-->
      <!--        >新增</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-view"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['api:order:edit']"
          >查看</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['api:order:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['api:order:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      border
      :data="orderList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!--      <el-table-column label="自生成主键" align="center" prop="id" />-->
      <el-table-column label="订单号" align="center" prop="orderCode" />
      <el-table-column label="订单类型" align="center" prop="orderType" />
      <!-- <el-table-column label="用户id" align="center" prop="userId" /> -->
      <el-table-column label="订单状态" align="center" prop="status" />
      <el-table-column label="车辆类型" align="center" prop="carType" />
      <!-- <el-table-column label="车辆状态" align="center" prop="carStatus" /> -->
      <!-- <el-table-column label="开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ formatDateTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ formatDateTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="起始位置" align="center" prop="startLocation" />
      <el-table-column label="结束位置" align="center" prop="endLocation" />
      <el-table-column label="救援状态" align="center" prop="rescueStatus" />
      <el-table-column label="总里程" align="center" prop="mileage" />
      <el-table-column label="订单报价" align="center" prop="orderPrice" />
      <el-table-column label="" align="center" prop="remark" />
      <!--      <el-table-column label="预计发车时间段" align="center" prop="predictStartTime" width="180">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ parseTime(scope.row.predictStartTime, '{y}-{m}-{d}') }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="预计发车时间段" align="center" prop="predictEndTime" width="180">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ parseTime(scope.row.predictEndTime, '{y}-{m}-{d}') }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleUpdate(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      append-to-body
      custom-class="order-detail-dialog"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div class="order-detail-container">
        <!-- 顶部导航选项卡 -->
        <div class="tab-nav">
          <div
            class="tab-item"
            :class="{ active: activeTab === 'basic' }"
            @click="activeTab = 'basic'"
          >
            <i class="el-icon-tickets"></i>
            <span>基本信息</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'route' }"
            @click="activeTab = 'route'"
          >
            <i class="el-icon-map-location"></i>
            <span>路线规划</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'cost' }"
            @click="activeTab = 'cost'"
          >
            <i class="el-icon-money"></i>
            <span>费用明细</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'photos' }"
            @click="activeTab = 'photos'"
          >
            <i class="el-icon-picture-outline"></i>
            <span>现场照片</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'log' }"
            @click="activeTab = 'log'"
          >
            <i class="el-icon-time"></i>
            <span>操作记录</span>
          </div>
        </div>

        <!-- 选项卡内容区域 -->
        <div class="tab-content">
          <!-- 基本信息选项卡 -->
          <div v-show="activeTab === 'basic'">
            <!-- 订单信息卡片 -->
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-tickets"></i>
                <span>基本信息</span>
              </div>
              <div class="card-content info-grid">
                <div class="grid-item">
                  <span class="grid-label">客户名称</span>
                  <span class="grid-value">{{
                    form.customerName || "李明"
                  }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">业务类型</span>
                  <span class="grid-value">{{
                    form.businessType || "拖车"
                  }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">案件类型</span>
                  <span class="grid-value">{{ form.caseType || "5" }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">案件标签</span>
                  <span class="grid-value">{{
                    form.caseTag || "代理订单"
                  }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">案件代码</span>
                  <span class="grid-value">{{ form.caseCode || "--" }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">订单编号</span>
                  <span class="grid-value">{{
                    form.orderCode || "202501030000002"
                  }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">订单状态</span>
                  <span class="grid-value"
                    ><el-tag
                      :type="getStatusTagType(form.status)"
                      size="mini"
                      >{{ form.status || "--" }}</el-tag
                    ></span
                  >
                </div>
                <div class="grid-item">
                  <span class="grid-label">订单类型</span>
                  <span class="grid-value"
                    ><el-tag type="info" effect="plain" size="mini">{{
                      form.orderType || "--"
                    }}</el-tag></span
                  >
                </div>
                <div class="grid-item">
                  <span class="grid-label">下单时间</span>
                  <span class="grid-value">{{
                    formatDateTime(form.createTime) || "--"
                  }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">订单报价</span>
                  <span class="grid-value price"
                    >¥ {{ form.orderPrice || "--" }}</span
                  >
                </div>
                <div class="grid-item">
                  <span class="grid-label">用户ID</span>
                  <span class="grid-value">{{ form.userId || "--" }}</span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">预计发车</span>
                  <span class="grid-value">{{
                    formatDateTime(form.predictStartTime) || "--"
                  }}</span>
                </div>
              </div>
            </div>

            <!-- 行程信息卡片 -->
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-map-location"></i>
                <span>行程信息</span>
              </div>
              <div class="card-content">
                <div class="journey-info">
                  <div class="location start">
                    <i class="el-icon-location-outline"></i>
                    <div class="location-info">
                      <div class="location-name">
                        {{ form.startLocation || "--" }}
                      </div>
                      <div class="location-time">
                        {{ formatDateTime(form.startTime) || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="route-line">
                    <div class="mileage">{{ form.mileage || "--" }} 公里</div>
                  </div>
                  <div class="location end">
                    <i class="el-icon-location-information"></i>
                    <div class="location-info">
                      <div class="location-name">
                        {{ form.endLocation || "--" }}
                      </div>
                      <div class="location-time">
                        {{ formatDateTime(form.endTime) || "--" }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="info-grid">
                  <div class="grid-item">
                    <span class="grid-label">预计发车</span>
                    <span class="grid-value">{{
                      formatDateTime(form.predictStartTime) || "--"
                    }}</span>
                  </div>
                  <div class="grid-item">
                    <span class="grid-label">预计到达</span>
                    <span class="grid-value">{{
                      formatDateTime(form.predictEndTime) || "--"
                    }}</span>
                  </div>
                  <div class="grid-item">
                    <span class="grid-label">总里程</span>
                    <span class="grid-value"
                      >{{ form.mileage || "--" }} 公里</span
                    >
                  </div>
                  <div class="grid-item">
                    <span class="grid-label">行程时长</span>
                    <span class="grid-value"
                      >{{ form.duration || "--" }} 分钟</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- 车辆信息卡片 -->
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-truck"></i>
                <span>车辆信息</span>
              </div>
              <div class="card-content info-grid">
                <div class="grid-item">
                  <span class="grid-label">车辆类型</span>
                  <span class="grid-value">
                    <i :class="getCarTypeIcon(form.carType)"></i>
                    {{ form.carType || "--" }}
                  </span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">车辆状态</span>
                  <span class="grid-value">
                    <el-tag type="warning" size="mini" v-if="form.carStatus">{{
                      form.carStatus
                    }}</el-tag>
                    <span v-else>--</span>
                  </span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">救援状态</span>
                  <span class="grid-value">
                    <el-tag
                      :type="
                        form.rescueStatus === '已救援' ? 'success' : 'warning'
                      "
                      size="mini"
                      v-if="form.rescueStatus"
                    >
                      {{ form.rescueStatus }}
                    </el-tag>
                    <span v-else>--</span>
                  </span>
                </div>
                <div class="grid-item">
                  <span class="grid-label">车牌号码</span>
                  <span class="grid-value">{{
                    form.licensePlate || "--"
                  }}</span>
                </div>
              </div>
            </div>

            <!-- 备注信息 -->
            <div class="detail-card" v-if="form.remark">
              <div class="card-title">
                <i class="el-icon-document"></i>
                <span>备注信息</span>
              </div>
              <div class="card-content">
                <div class="remark-container">
                  <div class="remark">{{ form.remark || "--" }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 路线规划选项卡 -->
          <div v-show="activeTab === 'route'">
            <!-- 行程轨迹地图 -->
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-map-location"></i>
                <span>行程轨迹</span>
              </div>
              <div
                class="card-content"
                style="height: 400px; position: relative; padding: 0"
              >
                <div v-if="isMapLoading" class="map-loading">
                  <i class="el-icon-loading"></i>
                  <p>地图加载中...</p>
                </div>
                <div v-if="mapError" class="map-error">
                  <i class="el-icon-warning-outline"></i>
                  <p>{{ mapError }}</p>
                  <el-button size="small" type="primary" @click="reloadMap"
                    >重新加载</el-button
                  >
                </div>
                <div class="map-container">
                  <AMapComponent
                    v-if="!isMapLoading && !mapError"
                    map-id="ac1761f8db43cefeda04b3b5ffbf2dc9"
                    :start-point="mapStartPoint"
                    :rescue-point="mapRescuePoint"
                    :end-point="mapEndPoint"
                    @map-loaded="onMapLoaded"
                    @map-error="onMapError"
                    @route-info="updateRouteInfo"
                    ref="amapComponent"
                  ></AMapComponent>
                </div>
                <div class="map-legend" v-if="!isMapLoading && !mapError">
                  <div class="legend-item">
                    <span class="line-color start"></span>
                    <span class="line-text">司机出发地 → 救援地点</span>
                    <span class="legend-tag">{{
                      mapRouteInfo.startToRescue || "--"
                    }}</span>
                  </div>
                  <div class="legend-item">
                    <span class="line-color end"></span>
                    <span class="line-text">救援地点 → 目的地</span>
                    <span class="legend-tag">{{
                      mapRouteInfo.rescueToEnd || "--"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 费用明细选项卡 -->
          <div v-show="activeTab === 'cost'">
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-money"></i>
                <span>费用详情</span>
              </div>
              <div class="card-content">
                <!-- 更新费用结构：起步价、超公里单价和附加费用 -->
                <div class="fee-structure">
                  <!-- 基础费用区域 -->
                  <div class="fee-section">
                    <div class="section-title">
                      <i class="el-icon-s-finance"></i>
                      <span>基础费用结构</span>
                    </div>
                    <div class="base-fee-structure">
                      <div class="fee-item">
                        <span class="fee-name">起步价</span>
                        <span class="fee-value price-red"
                          >¥ {{ feeTotal.basic }}</span
                        >
                        <span class="fee-desc">30公里内基础价格</span>
                      </div>
                      <div class="fee-item">
                        <span class="fee-name">超出每公里单价</span>
                        <span class="fee-value">¥ 5.0</span>
                        <span class="fee-desc">超出30公里后每公里收费</span>
                      </div>
                      <div class="fee-item">
                        <span class="fee-name">超出里程</span>
                        <span class="fee-value"
                          >{{
                            form.mileage
                              ? Math.max(
                                  0,
                                  parseFloat(form.mileage) - 30
                                ).toFixed(1)
                              : "0"
                          }}
                          公里</span
                        >
                        <span class="fee-desc">超出基础里程的距离</span>
                      </div>
                      <div class="fee-item">
                        <span class="fee-name">总里程费用</span>
                        <span class="fee-value price-red"
                          >¥
                          {{
                            (feeTotal.basic + feeTotal.extra - 95).toFixed(2)
                          }}</span
                        >
                        <span class="fee-desc">起步价 + 超出里程费用</span>
                      </div>
                    </div>
                  </div>

                  <!-- 附加费用区域 -->
                  <div class="fee-section">
                    <div class="section-title">
                      <i class="el-icon-plus"></i>
                      <span>附加费用</span>
                    </div>
                    <el-table
                      :data="
                        feeList.filter(
                          (item) =>
                            item.type === 'charge' &&
                            item.feeName !== '基础拖车费' &&
                            item.feeName !== '超里程费'
                        )
                      "
                      stripe
                      border
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="feeName"
                        label="费用项目"
                        align="center"
                        width="180"
                      ></el-table-column>
                      <el-table-column
                        prop="amount"
                        label="金额(元)"
                        align="center"
                        width="120"
                      >
                        <template slot-scope="scope">
                          <span class="price-red">{{ scope.row.amount }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="description"
                        label="说明"
                        align="center"
                      ></el-table-column>
                    </el-table>
                  </div>

                  <!-- 优惠信息区域 -->
                  <div
                    class="fee-section"
                    v-if="
                      feeList.filter((item) => item.type === 'discount')
                        .length > 0
                    "
                  >
                    <div class="section-title">
                      <i class="el-icon-discount"></i>
                      <span>优惠信息</span>
                    </div>
                    <el-table
                      :data="feeList.filter((item) => item.type === 'discount')"
                      stripe
                      border
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="feeName"
                        label="优惠项目"
                        align="center"
                        width="180"
                      ></el-table-column>
                      <el-table-column
                        prop="amount"
                        label="金额(元)"
                        align="center"
                        width="120"
                      >
                        <template slot-scope="scope">
                          <span class="price-green"
                            >-{{ scope.row.amount }}</span
                          >
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="description"
                        label="说明"
                        align="center"
                      ></el-table-column>
                    </el-table>
                  </div>
                </div>

                <!-- 费用总结区域 -->
                <div class="fee-summary">
                  <div class="summary-item">
                    <span class="summary-label">基础费用：</span>
                    <span class="summary-value">¥ {{ feeTotal.basic }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">附加费用：</span>
                    <span class="summary-value">¥ {{ feeTotal.extra }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="summary-label">优惠金额：</span>
                    <span class="summary-value price-green"
                      >-¥ {{ feeTotal.discount }}</span
                    >
                  </div>
                  <div class="summary-item total">
                    <span class="summary-label">总计金额：</span>
                    <span class="summary-value price-red"
                      >¥ {{ feeTotal.total }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 现场照片选项卡 -->
          <div v-show="activeTab === 'photos'">
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-picture-outline"></i>
                <span>现场照片</span>
              </div>
              <div class="card-content">
                <!-- 加载状态 -->
                <div v-if="photosLoading" class="photos-loading">
                  <i class="el-icon-loading"></i>
                  <p>照片数据加载中...</p>
                </div>
                
                <!-- 照片展示 -->
                <div v-else class="photo-display">
                  <div
                    v-for="(step, index) in photoSteps"
                    :key="index"
                    class="photo-item-wrapper"
                  >
                    <!-- 流程名称 -->
                    <div class="process-name" v-if="step.processName && step.isFirstInProcess">
                      <i class="el-icon-folder"></i>
                      <span>{{ step.processName }}</span>
                    </div>
                    
                    <div class="photo-title">
                      <span class="photo-step-title">{{ step.title }}</span>
                    </div>

                    <!-- 优化后的照片展示布局 - 模板照片和上传照片同行显示 -->
                    <div class="photo-content">
                      <!-- 无需拍照的环节只显示模板照片 -->
                      <div
                        v-if="!step.requirePhoto"
                        class="single-photo-container"
                      >
                        <div class="photo-section full-width">
                          <div class="photo-section-title">
                            <i class="el-icon-s-claim"></i>
                            <span>模板照片</span>
                          </div>
                          <div
                            class="photo-item"
                            @click="previewImage(step.templatePhoto)"
                          >
                            <img
                              :src="step.templatePhoto"
                              alt="模板照片"
                              class="photo-image"
                              @error="handleImageError"
                            />
                            <div class="photo-zoom">
                              <i class="el-icon-zoom-in"></i>
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 需要拍照的环节显示模板照片和上传照片 -->
                      <div v-else class="dual-photo-container">
                        <!-- 模板照片区域 -->
                        <div class="photo-section template-section">
                          <div class="photo-section-title">
                            <i class="el-icon-s-claim"></i>
                            <span>模板照片</span>
                          </div>
                          <div
                            class="photo-item"
                            @click="previewImage(step.templatePhoto)"
                          >
                            <img
                              :src="step.templatePhoto"
                              alt="模板照片"
                              class="photo-image"
                              @error="handleImageError"
                            />
                            <div class="photo-zoom">
                              <i class="el-icon-zoom-in"></i>
                            </div>
                          </div>
                        </div>

                        <!-- 实际照片区域 -->
                        <div class="photo-section actual-section">
                          <div class="photo-section-title">
                            <i class="el-icon-camera"></i>
                            <span>上传照片</span>
                          </div>

                          <div
                            v-if="
                              step.actualPhotos &&
                              step.actualPhotos.length > 0 &&
                              step.actualPhotos[0].url
                            "
                            class="photo-item"
                            @click="previewImage(step.actualPhotos[0].url)"
                          >
                            <div class="photo-time">{{ step.actualPhotos[0].time }}</div>
                            <img
                              :src="step.actualPhotos[0].url"
                              alt="上传照片"
                              class="photo-image"
                              @error="handleImageError"
                            />
                            <div class="photo-desc">
                              {{ step.actualPhotos[0].description }}
                            </div>
                            <div class="photo-zoom">
                              <i class="el-icon-zoom-in"></i>
                            </div>
                          </div>

                          <div v-else class="no-photo">
                            <i class="el-icon-picture-outline"></i>
                            <p>暂未上传</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作记录选项卡 -->
          <div v-show="activeTab === 'log'">
            <div class="detail-card">
              <div class="card-title">
                <i class="el-icon-time"></i>
                <span>订单操作记录</span>
              </div>
              <div class="card-content">
                <el-timeline class="custom-timeline">
                  <el-timeline-item
                    v-for="(log, index) in orderLogs"
                    :key="index"
                    :timestamp="log.time"
                    :type="getLogType(log.action)"
                    :icon="getLogIcon(log.action)"
                  >
                    <div class="log-content">
                      <div class="log-message">{{ log.message }}</div>
                      <div class="log-operator">操作人: {{ log.operator }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  delOrder,
  addOrder,
  updateOrder,
  orderImg
} from "@/api/api/order";
import AMapComponent from "@/components/AMapComponent";

export default {
  name: "Order",
  components: {
    AMapComponent,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单信息表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 激活的选项卡
      activeTab: "basic",
      // 照片步骤数据 - 将从接口获取
      photoSteps: [],
      // 照片加载状态
      photosLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        orderType: null,
        userId: null,
        status: null,
        carType: null,
        carStatus: null,
        startTime: null,
        endTime: null,
        startLocation: null,
        endLocation: null,
        rescueStatus: null,
        mileage: null,
        orderPrice: null,
        predictStartTime: null,
        predictEndTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        orderCode: [
          { required: true, message: "订单号不能为空", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "用户id不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "订单状态不能为空", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
      },
      isMapLoading: true,
      mapStartPoint: null,
      mapRescuePoint: null,
      mapEndPoint: null,
      mapError: null,
      mapRouteInfo: {
        startToRescue: "",
        rescueToEnd: "",
      },
      // 费用明细数据
      feeList: [
        {
          feeName: "基础拖车费",
          amount: 200,
          type: "charge",
          description: "30公里内基础费用",
        },
        {
          feeName: "超里程费",
          amount: 150,
          type: "charge",
          description: "超出30公里部分，每公里5元",
        },
        {
          feeName: "夜间服务费",
          amount: 50,
          type: "charge",
          description: "22:00-次日8:00期间服务额外收费",
        },
        {
          feeName: "高速通行费",
          amount: 45,
          type: "charge",
          description: "途径高速路段的通行费",
        },
        {
          feeName: "优惠券",
          amount: 50,
          type: "discount",
          description: "新用户专享优惠券",
        },
      ],
      // 费用汇总
      feeTotal: {
        basic: 200,
        extra: 245,
        discount: 50,
        total: 395,
      },
      // 订单日志记录
      orderLogs: [
        {
          time: "2023-05-15 14:30:22",
          action: "create",
          operator: "用户1001",
          message: "用户发起拖车订单",
        },
        {
          time: "2023-05-15 14:35:48",
          action: "assign",
          operator: "系统调度",
          message: "系统自动分配拖车司机",
        },
        {
          time: "2023-05-15 14:40:12",
          action: "accept",
          operator: "司机2053",
          message: "司机已接单，预计20分钟到达现场",
        },
        {
          time: "2023-05-15 15:02:33",
          action: "arrive",
          operator: "司机2053",
          message: "司机已到达现场，开始救援",
        },
        {
          time: "2023-05-15 15:25:19",
          action: "rescue",
          operator: "司机2053",
          message: "车辆已装载，开始拖运",
        },
        {
          time: "2023-05-15 16:10:45",
          action: "complete",
          operator: "司机2053",
          message: "已到达目的地，订单完成",
        },
        {
          time: "2023-05-15 16:15:30",
          action: "pay",
          operator: "用户1001",
          message: "用户已支付订单费用",
        },
        {
          time: "2023-05-15 16:20:05",
          action: "rate",
          operator: "用户1001",
          message: "用户评价：服务很满意，司机专业且有礼貌",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单信息列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderCode: null,
        orderType: null,
        userId: null,
        status: null,
        carType: null,
        carStatus: null,
        startTime: null,
        endTime: null,
        startLocation: null,
        endLocation: null,
        rescueStatus: null,
        mileage: null,
        orderPrice: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        predictStartTime: null,
        predictEndTime: null,
        duration: null,
        licensePlate: null,
        customerName: null,
        businessType: null,
        caseType: null,
        caseTag: null,
        caseCode: null,
      };
      this.resetForm("form");
      
      // 重置照片数据
      this.photoSteps = [];
      this.photosLoading = false;
      this.activeTab = "basic";
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.orderCode || this.ids;
      
      getOrder(id).then((response) => {
        this.form = response.data;

        // 设置演示用的默认值（如果后端未提供）
        if (!this.form.duration) {
          this.form.duration = Math.floor(Math.random() * 60) + 30; // 30-90分钟的随机时间
        }

        if (!this.form.licensePlate) {
          this.form.licensePlate =
            "京A" + Math.floor(10000 + Math.random() * 90000); // 随机车牌号
        }

        if (!this.form.customerName) {
          this.form.customerName = "李明";
        }

        if (!this.form.businessType) {
          this.form.businessType = "拖车";
        }

        if (!this.form.caseType) {
          this.form.caseType = "故障救援";
        }

        if (!this.form.caseTag) {
          this.form.caseTag = "代理订单";
        }

        if (!this.form.caseCode) {
          this.form.caseCode =
            "C" + Math.floor(100000 + Math.random() * 900000);
        }

        this.open = true;
        this.title = "订单详情信息";
        this.activeTab = "basic"; // 默认显示基本信息选项卡

        // 获取订单照片数据
        this.getOrderPhotos(id);

        // 确保地图API已加载
        this.checkMapAPILoaded()
          .then(() => {
            // 初始化地图数据
            this.$nextTick(() => {
              this.initMapData();
            });
          })
          .catch((error) => {
            this.onMapError(error);
          });
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateOrder(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除订单信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "api/order/export",
        {
          ...this.queryParams,
        },
        `order_${new Date().getTime()}.xlsx`
      );
    },
    getStatusTagType(status) {
      // 根据订单状态返回相应的标签类型
      const statusMap = {
        待处理: "info",
        处理中: "warning",
        已完成: "success",
        已取消: "danger",
        0: "info",
        1: "warning",
        2: "success",
        3: "danger",
      };
      return statusMap[status] || "info";
    },
    getCarTypeIcon(type) {
      // 根据车辆类型返回对应的图标类名
      const iconMap = {
        小型: "el-icon-truck",
        中型: "el-icon-truck",
        大型: "el-icon-truck",
        特大型: "el-icon-truck",
        0: "el-icon-bicycle",
        1: "el-icon-truck",
        2: "el-icon-ship",
        3: "el-icon-heavy-rain",
      };
      return iconMap[type] || "el-icon-truck";
    },
    formatDateTime(time) {
      if (!time) return "--";
      return this.parseTime(time, "{y}-{m}-{d} {h}:{i}");
    },
    onMapLoaded(map) {
      this.isMapLoading = false;
      this.mapError = null;
      console.log("地图加载完成", map);
    },
    onMapError(error) {
      this.isMapLoading = false;
      this.mapError =
        typeof error === "string"
          ? error
          : "地图加载失败，请检查网络连接或刷新页面";
      console.error("地图加载错误:", error);
    },
    reloadMap() {
      this.mapError = null;
      this.isMapLoading = true;

      // 重新加载页面中的地图脚本
      this.checkMapAPILoaded()
        .then(() => {
          this.initMapData();
        })
        .catch(() => {
          // 加载高德地图脚本
          const script = document.createElement("script");
          script.type = "text/javascript";
          // 使用配置的密钥
          script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${this.getMapApiKey()}&plugin=AMap.Driving,AMap.ToolBar,AMap.Scale,AMap.OverView,AMap.MapType`;
          document.head.appendChild(script);

          script.onload = () => {
            console.log("地图脚本加载成功");
            this.initMapData();
          };

          script.onerror = () => {
            console.error("地图脚本加载失败");
            this.onMapError("地图脚本加载失败，请检查网络连接");
          };
        });
    },
    // 获取高德地图API密钥
    getMapApiKey() {
      // 这里可以从环境变量或配置中获取密钥
      // 实际应用中应该从后端获取或使用环境变量配置
      return "2d080d26b95347ce81f3a927b5e1e72d"; // 替换为您的高德地图API密钥
    },
    // 检查高德地图API是否已加载
    checkMapAPILoaded() {
      return new Promise((resolve, reject) => {
        if (window.AMap) {
          console.log("高德地图API已加载");
          resolve();
        } else {
          console.log("尝试加载高德地图API");

          // 尝试动态加载高德地图API
          const script = document.createElement("script");
          script.type = "text/javascript";
          script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${this.getMapApiKey()}&plugin=AMap.Driving,AMap.ToolBar,AMap.Scale,AMap.OverView,AMap.MapType`;
          document.head.appendChild(script);

          script.onload = () => {
            console.log("高德地图API加载成功");
            resolve();
          };

          script.onerror = () => {
            console.error("高德地图API加载失败");
            reject("地图API加载失败，请检查网络连接");
          };

          // 设置超时检查
          setTimeout(() => {
            if (!window.AMap) {
              reject("地图API加载超时，请刷新页面重试");
            }
          }, 10000); // 10秒超时
        }
      });
    },
    initMapData() {
      console.log("初始化地图数据");
      this.isMapLoading = true;
      this.mapError = null;

      try {
        // 解析经纬度字符串 "116.034602,39.614649" 格式
        const parseLatLng = (latlngStr) => {
          if (!latlngStr) return null;

          try {
            // 分割经纬度字符串
            const [lng, lat] = latlngStr
              .split(",")
              .map((coord) => parseFloat(coord.trim()));

            if (isNaN(lng) || isNaN(lat)) {
              console.error("解析经纬度失败:", latlngStr);
              return null;
            }

            return { lng, lat };
          } catch (err) {
            console.error("解析经纬度出错:", err);
            return null;
          }
        };

        // 从接口数据中获取经纬度信息
        // 使用相同的坐标作为起点、救援点和目的地
        const rescuePoint = parseLatLng(
          this.form.startLal || "116.034602,39.614649"
        );
        const endPoint = parseLatLng(
          this.form.endLal || "116.034602,39.614649"
        );

        // 司机出发点暂时也使用救援点坐标
        const startPoint = parseLatLng(
          this.form.startLal || "116.034602,39.614649"
        );

        // 设置三个点的位置
        if (startPoint) {
          console.log("设置起点坐标:", startPoint);
          this.mapStartPoint = startPoint;
        } else {
          console.warn("未找到有效的起点坐标，使用默认值");
          this.mapStartPoint = { lng: 116.39747, lat: 39.908823 }; // 默认起点
        }

        if (rescuePoint) {
          console.log("设置救援点坐标:", rescuePoint);
          this.mapRescuePoint = rescuePoint;
        } else {
          console.warn("未找到有效的救援点坐标，使用默认值");
          this.mapRescuePoint = { lng: 116.403909, lat: 39.923423 }; // 默认救援点
        }

        if (endPoint) {
          console.log("设置终点坐标:", endPoint);
          this.mapEndPoint = endPoint;
        } else {
          console.warn("未找到有效的终点坐标，使用默认值");
          this.mapEndPoint = { lng: 116.494174, lat: 39.994707 }; // 默认终点
        }

        // 加载完成
        console.log("地图数据准备完成");
        setTimeout(() => {
          this.isMapLoading = false;
        }, 500);
      } catch (error) {
        console.error("地图数据初始化错误:", error);
        this.onMapError("地图数据初始化错误");
      }
    },
    /**
     * 更新路线信息
     * @param {string} type 路线类型，'startToRescue' 或 'rescueToEnd'
     * @param {string} info 路线信息
     */
    updateRouteInfo(type, info) {
      console.log("收到路线信息:", type, info);

      if (type && this.mapRouteInfo) {
        // 确保mapRouteInfo已初始化
        if (!this.mapRouteInfo) {
          this.mapRouteInfo = {
            startToRescue: "",
            rescueToEnd: "",
          };
        }

        // 更新相应的路线信息
        this.mapRouteInfo[type] = info || "--";

        console.log("更新后的路线信息:", this.mapRouteInfo);
      }
    },

    /**
     * 获取操作日志的图标
     * @param {string} action 操作类型
     * @returns {string} 图标类名
     */
    getLogIcon(action) {
      const iconMap = {
        create: "el-icon-plus",
        assign: "el-icon-s-promotion",
        accept: "el-icon-check",
        arrive: "el-icon-location",
        rescue: "el-icon-truck",
        complete: "el-icon-circle-check",
        pay: "el-icon-wallet",
        rate: "el-icon-star-on",
      };
      return iconMap[action] || "el-icon-more";
    },

    /**
     * 获取操作日志的类型
     * @param {string} action 操作类型
     * @returns {string} 类型
     */
    getLogType(action) {
      const typeMap = {
        create: "primary",
        assign: "info",
        accept: "success",
        arrive: "warning",
        rescue: "warning",
        complete: "success",
        pay: "success",
        rate: "info",
      };
      return typeMap[action] || "info";
    },
    
    /**
     * 获取订单照片数据
     * @param {string} orderId 订单ID
     */
    getOrderPhotos(orderId) {
      this.photosLoading = true;
      
      orderImg(orderId).then((response) => {
        console.log('订单照片接口返回数据:', response.data);
        if (response.data && Array.isArray(response.data)) {
          this.photoSteps = this.transformPhotoData(response.data);
          console.log('转换后的照片步骤:', this.photoSteps);
          
          // 按流程分组显示调试信息
          const processGroups = {};
          this.photoSteps.forEach(step => {
            if (!processGroups[step.processName]) {
              processGroups[step.processName] = [];
            }
            processGroups[step.processName].push(step.title);
          });
          console.log('按流程分组的环节:', processGroups);
        } else {
          // 如果接口返回空数据，使用默认数据
          this.photoSteps = this.getDefaultPhotoSteps();
        }
        this.photosLoading = false;
      }).catch((error) => {
        console.error('获取订单照片失败:', error);
        // 接口失败时使用默认数据
        this.photoSteps = this.getDefaultPhotoSteps();
        this.photosLoading = false;
        this.$message.warning('照片数据加载失败，显示默认数据');
      });
    },

    /**
     * 转换接口返回的照片数据格式
     * @param {Array} apiData 接口返回的数据
     * @returns {Array} 转换后的照片步骤数据
     * 
     * 接口数据结构：
     * {
     *   "nodeCode": "流程代码",
     *   "nodeCodeName": "流程名称", 
     *   "defaultImg": "默认照片URL",
     *   "imgs": [
     *     {
     *       "title": "环节名称",
     *       "defaultImg": "模板照片URL",
     *       "img": "上传的照片URL",
     *       "createTime": "创建时间"
     *     }
     *   ]
     * }
     * 
     * 转换逻辑：
     * - 每个item代表一个流程（使用nodeCodeName作为流程名称）
     * - imgs数组中的每个元素是该流程下的环节
     * - 每个环节有：title（环节名称）、defaultImg（模板照片）、img（上传的照片）
     * - 左侧显示defaultImg（模板照片）
     * - 右侧显示img（上传的照片）
     * 
     * 示例数据结构：
     * [
     *   {
     *     "nodeCode": "INSPECTION",
     *     "nodeCodeName": "验车环节",
     *     "defaultImg": "默认照片URL",
     *     "imgs": [
     *       { "title": "清晰体现故障车大架号", "defaultImg": "模板照片URL", "img": "上传照片URL", "createTime": "2023-06-11 13:17" },
     *       { "title": "清晰体现故障车左前45°现场环境", "defaultImg": "模板照片URL", "img": "上传照片URL", "createTime": "2023-06-11 13:16" }
     *     ]
     *   }
     * ]
     */
    transformPhotoData(apiData) {
      const photoSteps = [];
      
      apiData.forEach((item) => {
        // 如果imgs数组存在，则每个imgs元素都是该流程下的环节
        if (item.imgs && Array.isArray(item.imgs)) {
          item.imgs.forEach((imgItem, imgIndex) => {
            photoSteps.push({
              title: imgItem.title || '未知环节',
              processName: item.nodeCodeName || '未知流程', // 添加流程名称
              templatePhoto: imgItem.defaultImg || this.getDefaultTemplatePhoto(photoSteps.length),
              requirement: this.getPhotoRequirement(imgItem.nodeCode || item.nodeCode),
              requirePhoto: this.isPhotoRequired(imgItem.nodeCode || item.nodeCode),
              actualPhotos: [{
                url: imgItem.img || '',
                description: imgItem.title || '',
                time: imgItem.createTime || '',
                nodeCode: imgItem.nodeCode || item.nodeCode || ''
              }],
              nodeCode: imgItem.nodeCode || item.nodeCode || '',
              processCode: item.nodeCode || '', // 添加流程代码
              isFirstInProcess: imgIndex === 0 // 标记是否为流程中的第一个环节
            });
          });
        } else {
          // 如果没有imgs数组，则使用item本身作为环节
          photoSteps.push({
            title: item.nodeCodeName || '未知环节',
            processName: item.nodeCodeName || '未知流程',
            templatePhoto: item.defaultImg || this.getDefaultTemplatePhoto(photoSteps.length),
            requirement: this.getPhotoRequirement(item.nodeCode),
            requirePhoto: this.isPhotoRequired(item.nodeCode),
            actualPhotos: [],
            nodeCode: item.nodeCode || '',
            processCode: item.nodeCode || '',
            isFirstInProcess: true
          });
        }
      });
      
      return photoSteps;
    },

    /**
     * 获取默认的照片步骤数据（当接口无数据时使用）
     * @returns {Array} 默认照片步骤数据
     */
    getDefaultPhotoSteps() {
      return [
        {
          title: "到达现场",
          templatePhoto: "https://img0.baidu.com/it/u=3033722181,158879335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334",
          requirement: "请拍摄到达救援现场时的照片，确保能够清晰展示救援车辆和环境。注意要拍摄全景，包含周边环境信息，以便记录到达现场的情况。",
          requirePhoto: true,
          actualPhotos: []
        },
        {
          title: "车辆检查",
          templatePhoto: "https://img1.baidu.com/it/u=1801842659,4039385681&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
          requirement: "请拍摄需要救援车辆的外观情况、底盘状况、轮胎情况等。确保拍摄车辆前、后、侧等角度，并记录车辆损坏或故障的具体部位。",
          requirePhoto: true,
          actualPhotos: []
        },
        {
          title: "装载过程",
          templatePhoto: "https://img0.baidu.com/it/u=1732809441,3810513445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
          requirement: "请拍摄车辆装载到拖车上的全过程，确保记录装载前、装载中和装载完成后的状态。注意安全，确保车辆固定牢固。",
          requirePhoto: true,
          actualPhotos: []
        },
        {
          title: "送达目的地",
          templatePhoto: "https://img1.baidu.com/it/u=3642312242,1815926826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
          requirement: "请拍摄到达目的地后的情况，包括卸载过程和卸载完成后的车辆状态。确保记录目的地环境和车辆最终停放位置。",
          requirePhoto: true,
          actualPhotos: []
        }
      ];
    },

    /**
     * 根据环节代码获取默认模板照片
     * @param {number} index 环节索引
     * @returns {string} 默认模板照片URL
     */
    getDefaultTemplatePhoto(index) {
      const defaultPhotos = [
        "https://img0.baidu.com/it/u=3033722181,158879335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334",
        "https://img1.baidu.com/it/u=1801842659,4039385681&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
        "https://img0.baidu.com/it/u=1732809441,3810513445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
        "https://img1.baidu.com/it/u=3642312242,1815926826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
      ];
      return defaultPhotos[index] || defaultPhotos[0];
    },

    /**
     * 根据环节代码获取拍照要求描述
     * @param {string} nodeCode 环节代码
     * @returns {string} 拍照要求描述
     */
    getPhotoRequirement(nodeCode) {
      const requirements = {
        'ARRIVE': '请拍摄到达救援现场时的照片，确保能够清晰展示救援车辆和环境。注意要拍摄全景，包含周边环境信息，以便记录到达现场的情况。',
        'CHECK': '请拍摄需要救援车辆的外观情况、底盘状况、轮胎情况等。确保拍摄车辆前、后、侧等角度，并记录车辆损坏或故障的具体部位。',
        'LOAD': '请拍摄车辆装载到拖车上的全过程，确保记录装载前、装载中和装载完成后的状态。注意安全，确保车辆固定牢固。',
        'TRANSPORT': '请在运输过程中适当时机拍摄运输状态，确保安全驾驶的前提下记录运输情况。可在休息或停车时完成拍摄。',
        'DELIVER': '请拍摄到达目的地后的情况，包括卸载过程和卸载完成后的车辆状态。确保记录目的地环境和车辆最终停放位置。'
      };
      return requirements[nodeCode] || '请按照要求拍摄相关照片，确保照片清晰完整。';
    },

    /**
     * 判断环节是否需要拍照
     * @param {string} nodeCode 环节代码
     * @returns {boolean} 是否需要拍照
     */
    isPhotoRequired(nodeCode) {
      // 运输途中环节通常不需要强制拍照
      const optionalNodes = ['TRANSPORT'];
      return !optionalNodes.includes(nodeCode);
    },

    /**
     * 处理图片加载错误
     * @param {Event} event 错误事件
     */
    handleImageError(event) {
      // 设置默认的占位图片
      event.target.src = '';
      event.target.alt = '图片加载失败';
    },


    /**
     * 图片预览方法
     * @param {string} url 图片URL
     */
    previewImage(url) {
      // 使用Element UI的图片预览功能
      this.$msgbox({
        title: "照片预览",
        message: this.$createElement(
          "div",
          {
            style: {
              width: "100%",
              textAlign: "center",
            },
          },
          [
            this.$createElement("img", {
              attrs: {
                src: url,
                style: "max-width: 100%; max-height: 500px;",
              },
            }),
          ]
        ),
        showCancelButton: false,
        confirmButtonText: "关闭",
        customClass: "image-preview-dialog",
      })
        .then(() => {
          // 关闭预览
        })
        .catch(() => {
          // 处理错误
        });
    },


  },
};
</script>

<style lang="scss" scoped>
/* 订单详情对话框样式 */
.order-detail-dialog {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 修复el-dialog相关样式 */
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 85vh;
  max-width: 1200px;
  width: 85%;
  border-radius: 5px;
  overflow: hidden;
}

::v-deep .el-dialog__wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .el-dialog__body {
  padding: 0;
  overflow: hidden;
  background-color: #f5f7fa;
  border-radius: 0 0 4px 4px;
  flex: 1;
  overflow-y: auto;
}

::v-deep .el-dialog__header {
  background-color: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-dialog__title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

::v-deep .el-dialog__footer {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #f0f0f0;
  background-color: #fff;
}

/* 订单详情容器 */
.order-detail-container {
  background-color: #f5f7fa;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 0;
  padding-top: 42px; /* 为顶部导航预留空间 */
}

/* 顶部导航选项卡 */
.tab-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  z-index: 10;
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  user-select: none;
  color: #606266;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}

.tab-item i {
  font-size: 15px;
  margin-right: 6px;
  color: #909399;
  transition: all 0.3s;
}

.tab-item.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  background-color: transparent;
}

.tab-item.active i,
.tab-item.active span {
  color: #409eff;
  font-weight: 500;
}

.tab-item:hover {
  color: #409eff;
}

.tab-item:hover i {
  color: #409eff;
}

/* 选项卡内容区域 */
.tab-content {
  padding: 10px 15px;
  background-color: #f5f7fa;
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid #f0f0f0;
  margin-top: -1px;
  height: 100%;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .order-detail-dialog {
    width: 96%;
    margin: 0 auto;
  }

  .tab-content {
    padding: 8px 10px;
    min-height: 320px;
    max-height: 80vh;
  }

  .detail-card {
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .card-content {
    padding: 10px 12px;
  }

  .info-row {
    flex-direction: column;
    margin-bottom: 8px;
  }

  .info-item {
    margin-bottom: 8px;
  }

  .info-row:last-child .info-item:last-child {
    margin-bottom: 0;
  }

  .tab-nav {
    height: 40px;
  }

  .tab-item {
    padding: 0 4px;
    font-size: 12px;
  }

  .tab-item i {
    font-size: 14px;
    margin-right: 3px;
  }

  .item-label {
    font-size: 11px;
    margin-bottom: 2px;
  }

  .item-value {
    font-size: 12px;
  }

  .location-name {
    font-size: 12px;
  }

  .location-time {
    font-size: 11px;
  }

  .map-container {
    height: 240px !important;
  }

  .map-legend {
    position: static;
    margin-top: 8px;
    padding: 6px 8px;
    box-shadow: none;
    background-color: #f5f7fa;
    border: 1px solid #e8e8e8;
  }

  .detail-card .card-content[style*="height: 400px"] {
    height: 280px !important;
  }

  /* 移动端网格布局适配 */
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* 卡片样式 */
.detail-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-title {
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  background-color: #fafafa;
}

.card-title i {
  color: #409eff;
  margin-right: 8px;
  font-size: 16px;
}

.card-title span {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.card-content {
  padding: 12px 15px;
}

/* 信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px 15px;
}

/* 响应式网格布局 */
@media screen and (max-width: 1200px) {
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 576px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

.grid-item {
  padding: 6px 0;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
}

.grid-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.grid-value {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  color: #f56c6c;
  font-weight: 600;
}

.full-width {
  width: 100%;
}

/* 行程轨迹样式 */
.journey-info {
  position: relative;
  padding: 5px 0;
  margin-bottom: 12px;
}

.location {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  position: relative;
}

.location i {
  font-size: 16px;
  margin-right: 10px;
  margin-top: 2px;
}

.location.start i {
  color: #409eff;
}

.location.end i {
  color: #67c23a;
}

.location-info {
  flex: 1;
}

.location-name {
  font-size: 13px;
  color: #303133;
  margin-bottom: 3px;
  font-weight: 500;
}

.location-time {
  font-size: 12px;
  color: #909399;
}

.route-line {
  padding-left: 25px;
  position: relative;
  margin: 8px 0 15px;
}

.route-line::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -15px;
  height: 30px;
  width: 1px;
  background-color: #dcdfe6;
}

.mileage {
  display: inline-block;
  font-size: 12px;
  color: #606266;
  background-color: #f5f7fa;
  padding: 2px 8px;
  border-radius: 3px;
}

/* 车辆类型显示 */
.car-type-display {
  display: flex;
  align-items: center;
}

.car-type-display i {
  font-size: 16px;
  margin-right: 5px;
  color: #606266;
}

/* 备注信息 */
.remark-container {
  max-height: 100px;
  overflow: auto;
  padding: 8px 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.remark {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

/* 地图相关 */
.map-container {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.map-loading,
.map-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 5;
  border-radius: 4px;
}

.map-loading i {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.map-error i {
  font-size: 40px;
  color: #f56c6c;
  margin-bottom: 15px;
}

.map-loading p,
.map-error p {
  font-size: 15px;
  color: #606266;
  margin-bottom: 15px;
}

.map-legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.line-color {
  width: 25px;
  height: 4px;
  margin-right: 10px;
  border-radius: 2px;
}

.line-color.start {
  background-color: #1890ff;
}

.line-color.end {
  background-color: #67c23a;
}

.line-text {
  font-size: 13px;
  color: #606266;
  margin-right: 10px;
}

.legend-tag {
  font-size: 12px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* 费用相关 */
.price-red {
  color: #f56c6c;
}

.price-green {
  color: #67c23a;
}

.fee-summary {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ebeef5;
}

.summary-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}

.summary-value {
  font-size: 14px;
  color: #303133;
  min-width: 80px;
  text-align: right;
}

.summary-item.total .summary-label,
.summary-item.total .summary-value {
  font-size: 16px;
  font-weight: 500;
}

/* 操作记录时间线 */
.custom-timeline {
  padding: 5px 0;
}

.log-content {
  background-color: #f9f9f9;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.log-message {
  font-size: 13px;
  color: #303133;
  line-height: 1.5;
  margin-bottom: 4px;
}

.log-operator {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 时间线样式调整 */
::v-deep .el-timeline-item__wrapper {
  padding-left: 18px;
}

::v-deep .el-timeline-item__timestamp {
  color: #606266;
  font-size: 12px;
}

::v-deep .el-timeline-item__node--primary {
  background-color: #409eff;
}

::v-deep .el-timeline-item__node--success {
  background-color: #67c23a;
}

::v-deep .el-timeline-item__node--warning {
  background-color: #e6a23c;
}

::v-deep .el-timeline-item__node--info {
  background-color: #909399;
}

/* 现场照片样式 */
.photo-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.progress-step {
  flex: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding: 0 5px;
  transition: all 0.3s;
}

.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -50%;
  width: 100%;
  height: 2px;
  background-color: #ebeef5;
  z-index: 0;
}

.progress-step.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.progress-step.completed .step-number {
  background-color: #67c23a;
  color: #fff;
}

.progress-step.current .step-number {
  background-color: #409eff;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 5px;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  transition: all 0.3s;
}

.step-content {
  font-size: 13px;
  color: #606266;
}

.step-title {
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-status {
  font-size: 12px;
  color: #909399;
}

.progress-step.completed .step-status {
  color: #67c23a;
}

.progress-step.current .step-status {
  color: #409eff;
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.showcase-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
}

.title-step {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  font-size: 12px;
  margin-right: 8px;
  font-weight: normal;
}

.title-text {
  font-weight: 500;
}

.showcase-nav {
  display: flex;
  align-items: center;
}

.showcase-requirement {
  background-color: #f9f9f9;
  padding: 12px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  border-left: 3px solid #409eff;
}

.showcase-requirement i {
  margin-right: 8px;
  font-size: 16px;
  color: #909399;
  margin-top: 2px;
}

.showcase-photos {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .showcase-photos {
    flex-direction: column;
  }

  .progress-step .step-title {
    font-size: 12px;
  }

  .progress-step .step-status {
    display: none;
  }

  .progress-step:not(:last-child)::after {
    top: 8px;
  }
}

.showcase-template,
.showcase-actual {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.template-header,
.actual-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-size: 13px;
  color: #606266;
}

.actual-header .el-tag {
  margin-left: auto;
}

.template-header i,
.actual-header i {
  margin-right: 5px;
  font-size: 14px;
}

.template-photo,
.actual-photo {
  position: relative;
  overflow: hidden;
  height: 300px;
  cursor: pointer;
  transition: all 0.3s;
}

.template-photo:hover,
.actual-photo:hover {
  opacity: 0.95;
}

.template-photo img,
.actual-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.template-photo:hover img,
.actual-photo:hover img {
  transform: scale(1.05);
}

.photo-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}

.template-photo:hover .photo-zoom,
.actual-photo:hover .photo-zoom {
  opacity: 1;
}

.photo-zoom i {
  font-size: 18px;
  color: #fff;
}

.photo-time,
.photo-desc {
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 15px;
  font-size: 12px;
  z-index: 1;
}

.photo-time {
  top: 0;
  text-align: right;
}

.photo-desc {
  bottom: 0;
  text-align: left;
}

.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #909399;
  background-color: #f5f7fa;
}

.no-photo i {
  font-size: 50px;
  margin-bottom: 15px;
}

/* 照片预览对话框样式 */
::v-deep .image-preview-dialog {
  width: auto;
  max-width: 90%;
}

::v-deep .image-preview-dialog .el-message-box__content {
  padding: 10px;
}

::v-deep .image-preview-dialog .el-message-box__header {
  padding: 10px;
}

::v-deep .image-preview-dialog .el-message-box__btns {
  padding: 10px;
}

/* 轮播图样式 */
::v-deep .el-carousel__indicators {
  bottom: 5px;
}

::v-deep .el-carousel__indicator button {
  background-color: rgba(255, 255, 255, 0.5);
}

::v-deep .el-carousel__indicator.is-active button {
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 96%;
    max-height: 90vh;
  }

  .order-detail-dialog {
    width: 96%;
    margin: 0 auto;
  }

  .tab-content {
    padding: 8px 10px;
    min-height: 320px;
    max-height: 80vh;
  }
}

/* 照片加载状态样式 */
.photos-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.photos-loading i {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.photos-loading p {
  font-size: 14px;
  color: #606266;
}

/* 流程名称样式 */
.process-name {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.process-name i {
  color: #409eff;
  margin-right: 8px;
  font-size: 16px;
}

.process-name span {
  font-size: 14px;
  font-weight: 500;
  color: #409eff;
}

/* 照片展示样式 */
.photo-display {
  padding: 10px 0;
  margin-bottom: 0;
}

.photo-item-wrapper {
  margin-bottom: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.photo-item-wrapper:last-child {
  margin-bottom: 0;
}

/* 现场照片时间线样式 */
.photo-timeline {
  padding: 10px 0;
  margin-bottom: 0;
}

/* 修改el-timeline样式使其更适合照片展示 */
::v-deep .photo-timeline .el-timeline-item__wrapper {
  padding-left: 20px;
}

::v-deep .photo-timeline .el-timeline-item__node {
  left: 2px;
}

::v-deep .photo-timeline .el-timeline-item__tail {
  left: 9px;
}

::v-deep .photo-timeline .el-timeline-item__timestamp {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

.photo-timeline-item {
  margin-bottom: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.photo-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.photo-step-title {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-right: 10px;
}

.photo-requirement {
  font-size: 13px;
  color: #606266;
  background-color: #f5f7fa;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  border-left: 3px solid #909399;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}

.photo-requirement i {
  font-size: 16px;
  color: #909399;
  margin-right: 8px;
  margin-top: 2px;
}

.photo-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 双照片容器样式 */
.dual-photo-container {
  display: flex;
  gap: 15px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .dual-photo-container {
    flex-direction: column;
  }
}

/* 模板照片区域 */
.template-section {
  flex: 1;
  min-width: 250px;
}

/* 实际照片区域 */
.actual-section {
  flex: 2;
}

/* 单照片容器样式 */
.single-photo-container {
  width: 100%;
}

.full-width {
  width: 100%;
}

.photo-section {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.photo-section-title {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-size: 13px;
  color: #606266;
}

.photo-section-title i {
  margin-right: 5px;
}

.photo-count {
  margin-left: 5px;
  font-size: 12px;
  color: #909399;
}

.photo-item {
  position: relative;
  overflow: hidden;
  height: 200px;
  cursor: pointer;
}

.photo-item-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  padding: 10px;
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.photo-item:hover .photo-image {
  transform: scale(1.05);
}

.photo-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.photo-item:hover .photo-zoom {
  opacity: 1;
}

.photo-time,
.photo-desc {
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 15px;
  font-size: 12px;
  z-index: 1;
}

.photo-time {
  top: 0;
  text-align: right;
}

.photo-desc {
  bottom: 0;
  text-align: left;
}

.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  background-color: #fff;
  padding: 15px;
}

.no-photo i {
  font-size: 50px;
  margin-bottom: 15px;
}

/* 添加照片时间线与操作记录时间线一致的样式 */
::v-deep .photo-timeline .el-timeline-item__node--primary {
  background-color: #409eff;
}

::v-deep .photo-timeline .el-timeline-item__node--success {
  background-color: #67c23a;
}

::v-deep .photo-timeline .el-timeline-item__node--warning {
  background-color: #e6a23c;
}

::v-deep .photo-timeline .el-timeline-item__node--danger {
  background-color: #f56c6c;
}

::v-deep .photo-timeline .el-timeline-item__node--info {
  background-color: #909399;
}

/* 费用结构样式 */
.fee-structure {
  margin-bottom: 20px;
}

.fee-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
}

.section-title i {
  margin-right: 8px;
  color: #409eff;
}

.base-fee-structure {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
}

.fee-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #ebeef5;
}

.fee-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.fee-name {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.fee-value {
  width: 120px;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin: 0 15px;
}

.fee-desc {
  flex: 2;
  font-size: 13px;
  color: #909399;
}
</style>
